<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import type { AttendanceItem, OverTimeItem, WorkStatisticsItemMap, WorkStatisticsMap } from '../../types/attendance.d'
import Attendance from '../../components/attendance/Attendance.vue'
import OverTime from '../../components/attendance/OverTime.vue'
import Upload from '../../components/attendance/Upload.vue'
import { QAIndexDB } from '@/utils/indexDB'

const router = useRouter()

const activeKey = ref(0)
// 考勤列表
const attendanceList = ref<AttendanceItem[]>([])
// 加班列表
const overTimeList = ref<OverTimeItem[]>([])
// 员工列表
const employeeList = ref<string[]>([])
// 上传文件弹窗
const openValue = ref<boolean>(false)

function showInfo(isSuccess: boolean) {
  const { warning, success } = message
  const fn = isSuccess ? success : warning
  const msg = isSuccess ? '上传成功' : '考勤有效数据为空，请检查上传模板重新上传！'
  fn({
    content: () => msg,
    style: {
      marginTop: '40vh',
    },
  })
}
// 确认上传
function onConfirm(workStatisticsData: WorkStatisticsMap, _employeeList: string[]) {
  const { overTimeData, attendanceData } = handleWorkStatisticsData(workStatisticsData || {})
  // 校验上传的数据
  if (attendanceData.length === 0) {
    showInfo(false)
    return
  }
  showInfo(true)
  attendanceList.value = attendanceData
  overTimeList.value = overTimeData
  employeeList.value = _employeeList

  // 保存在IndexedDB
  QAIndexDB.setItem('ATTENDANCE_MAP', {
    workStatisticsData,
    employeeList: _employeeList,
  })
}

// 设置补班日
function goPage() {
  router.push('/attendanceManagement/setting')
}
function handleWorkStatisticsData(workStatisticsData: WorkStatisticsMap) {
  const attendanceData: AttendanceItem[] = []
  const overTimeData: OverTimeItem[] = []
  Object.values(workStatisticsData).forEach((item: WorkStatisticsItemMap) => {
    attendanceData.push(...item?.attendanceList)
    overTimeData.push(...item?.overTimeList)
  })

  return { attendanceData, overTimeData }
}
// 获取考勤列表、加班列表、员工列表
onMounted(() => {
  QAIndexDB.getItem('ATTENDANCE_MAP')
    .then((data: any) => {
      const { overTimeData, attendanceData } = handleWorkStatisticsData(data?.workStatisticsData || {})
      attendanceData.sort((a, b) => {
        return a.employeeName?.localeCompare(b.employeeName, 'zh-CN')
      })
      attendanceList.value = attendanceData
      overTimeList.value = overTimeData
      employeeList.value = data?.employeeList
    })
})
</script>

<template>
  <a-alert message="温馨提示：请先上传文件" type="info" show-icon>
    <template #action>
      <a-button type="primary" @click="openValue = true">
        上传文件
      </a-button>
      <a-button type="primary" @click="goPage">
        补班日设置
      </a-button>
    </template>
  </a-alert>

  <a-tabs v-model:active-key="activeKey">
    <a-tab-pane :key="0" tab="考勤统计">
      <Attendance :attendance-list="attendanceList" :employee-list="employeeList" />
    </a-tab-pane>
    <a-tab-pane :key="1" tab="加班统计">
      <OverTime :over-time-list="overTimeList" :employee-list="employeeList" />
    </a-tab-pane>
  </a-tabs>

  <!-- 上传文件 -->
  <Upload v-model:open="openValue" @confirm="onConfirm" />
</template>

<style lang="scss" scoped>
.ant-tabs {
  margin-top: 16px;
}
</style>
